<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<meta charset="UTF-8">
<title>Calendar</title>
</head>
<body>
	<wicket:panel>
		<link href="/css/calendar/dailog.css" rel="stylesheet" type="text/css" />
		<link href="/css/calendar/calendar.css" rel="stylesheet" type="text/css" />
		<link href="/css/calendar/dp.css" rel="stylesheet" type="text/css" />
		<link href="/css/calendar/alert.css" rel="stylesheet" type="text/css" />
		<link href="/css/calendar/main.css" rel="stylesheet" type="text/css" />


		<script type="text/javascript" src="/js/jquery-1.6.4.js"></script>
		<script src="/js/calendar/Common.js" type="text/javascript"></script>
		<script src="/js/calendar/datepicker_lang_US.js" type="text/javascript"></script>
		<script src="/js/calendar/jquery.datepicker.js" type="text/javascript"></script>
		<script src="/js/calendar/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
		<script src="/js/calendar/jquery.alert.js" type="text/javascript"></script>
		<script src="/js/calendar/jquery.ifrmdailog.js" defer="defer" type="text/javascript"></script>
		<script src="/js/calendar/wdCalendar_lang_US.js" type="text/javascript"></script>
		<script type="text/javascript" src="/js/calendar/jquery.calendar.js"></script>
		<script type="text/javascript">
			$(document).ready(
					function() {
						var view = "week";

						var DATA_FEED_URL = "/API";
						var op = {
							view : view,
							theme : 3,
							showday : new Date(),
							EditCmdhandler : Edit,
							DeleteCmdhandler : Delete,
							ViewCmdhandler : View,
							onWeekOrMonthToDay : wtd,
							onBeforeRequestData : cal_beforerequest,
							onAfterRequestData : cal_afterrequest,
							onRequestDataError : cal_onerror,
							autoload : true,
							url : DATA_FEED_URL + "?method=list",
							quickAddUrl : DATA_FEED_URL + "?method=add",
							quickUpdateUrl : DATA_FEED_URL + "?method=update",
							quickDeleteUrl : DATA_FEED_URL + "?method=remove"
						};
						var $dv = $("#header");
						var _MH = document.documentElement.clientHeight;
						var dvH = $dv.height();
						op.height = _MH - dvH - 20;
						op.eventItems = [];

						var p = $("#gridcontainer").bcalendar(op).BcalGetOp();
						if (p && p.datestrshow) {
							$("#txtdatetimeshow").text(p.datestrshow);
						}
						$("#caltoolbar").noSelect();

						$("#hdtxtshow").datepicker(
								{
									picker : "#txtdatetimeshow",
									showtarget : $("#txtdatetimeshow"),
									onReturn : function(r) {
										var p = $("#gridcontainer").gotoDate(r)
												.BcalGetOp();
										if (p && p.datestrshow) {
											$("#txtdatetimeshow").text(
													p.datestrshow);
										}
									}
								});
						function cal_beforerequest(type) {
							var t = "Loading data...";
							switch (type) {
							case 1:
								t = "Loading data...";
								break;
							case 2:
							case 3:
							case 4:
								t = "The request is being processed ...";
								break;
							}
							$("#errorpannel").hide();
							$("#loadingpannel").html(t).show();
						}
						function cal_afterrequest(type) {

							switch (type) {
							case 1:
								$("#loadingpannel").hide();
								break;
							case 2:
							case 3:
							case 4:
								$("#loadingpannel").html("Success!");
								window.setTimeout(function() {
									$("#loadingpannel").hide();
								}, 2000);
								break;
							}

						}
						function cal_onerror(type, data) {
							$("#errorpannel").show();
						}

						function View(data) {
							Edit(data);
						}
						function Delete(data, callback) {
							$.alerts.okButton = "Ok";
							$.alerts.cancelButton = "Cancel";
							hiConfirm("Are You Sure to Delete this Event",
									'Confirm', function(r) {
										r && callback(0);
									});
						}
						function wtd(p) {
							if (p && p.datestrshow) {
								$("#txtdatetimeshow").text(p.datestrshow);
							}
							$("#caltoolbar div.fcurrent").each(function() {
								$(this).removeClass("fcurrent");
							})
							$("#showdaybtn").addClass("fcurrent");
						}
						//to show day view
						$("#showdaybtn").click(
								function(e) {
									//document.location.href="#day";
									$("#caltoolbar div.fcurrent")
											.each(
													function() {
														$(this).removeClass(
																"fcurrent");
													})
									$(this).addClass("fcurrent");
									var p = $("#gridcontainer").swtichView(
											"day").BcalGetOp();
									if (p && p.datestrshow) {
										$("#txtdatetimeshow").text(
												p.datestrshow);
									}
								});
						//to show week view
						$("#showweekbtn").click(
								function(e) {
									//document.location.href="#week";
									$("#caltoolbar div.fcurrent")
											.each(
													function() {
														$(this).removeClass(
																"fcurrent");
													})
									$(this).addClass("fcurrent");
									var p = $("#gridcontainer").swtichView(
											"week").BcalGetOp();
									if (p && p.datestrshow) {
										$("#txtdatetimeshow").text(
												p.datestrshow);
									}

								});
						//to show month view
						$("#showmonthbtn").click(
								function(e) {
									//document.location.href="#month";
									$("#caltoolbar div.fcurrent")
											.each(
													function() {
														$(this).removeClass(
																"fcurrent");
													})
									$(this).addClass("fcurrent");
									var p = $("#gridcontainer").swtichView(
											"month").BcalGetOp();
									if (p && p.datestrshow) {
										$("#txtdatetimeshow").text(
												p.datestrshow);
									}
								});

						$("#showreflashbtn").click(function(e) {
							$("#gridcontainer").reload();
						});

						//Add a new event
						$("#faddbtn").click(function(e) {
							var url = "/Event";
							OpenModelWindow(url, {
								width : 900,
								height : 690,
								caption : "Create New Event"
							});
						});
						//go to today
						$("#showtodaybtn").click(function(e) {
							var p = $("#gridcontainer").gotoDate().BcalGetOp();
							if (p && p.datestrshow) {
								$("#txtdatetimeshow").text(p.datestrshow);
							}

						});
						//previous date range
						$("#sfprevbtn").click(
								function(e) {
									var p = $("#gridcontainer").previousRange()
											.BcalGetOp();
									if (p && p.datestrshow) {
										$("#txtdatetimeshow").text(
												p.datestrshow);
									}

								});
						//next date range
						$("#sfnextbtn").click(
								function(e) {
									var p = $("#gridcontainer").nextRange()
											.BcalGetOp();
									if (p && p.datestrshow) {
										$("#txtdatetimeshow").text(
												p.datestrshow);
									}
								});

					});
			function Edit(data) {
				var eurl = "/Event?eventId={0}&startTime={2}&endTime={3}&iswindow=1";
			
				if (data) {
					data2 = data;
					data2[2] = $("#gridcontainer").convertDate(data[2]);
					data2[3] = $("#gridcontainer").convertDate(data[3]);
					
					var url = StrFormat(eurl, data2);
				
					OpenModelWindow(url, {
						width : 900,
						height : 690,
						caption : "Edit Event",
						onclose : function() {
							$("#gridcontainer").reload();
						}
					});
				}
			}
		</script>
		<div>
			<table style="width: 100%;">
				<tr>
					<td style="width: 150px; vertical-align: top;">

						<div id="calhead" style="padding-left: 1px; padding-right: 1px; height: 220px;">
							<div class="cHead">
								<div id="loadingpannel" class="ptogtitle loadicon" style="display: none;">Loading data...</div>
								<div id="errorpannel" class="ptogtitle loaderror" style="display: none;">Sorry, could not load your data, please try again
									later</div>
							</div>

							<div id="caltoolbar" class="ctoolbar">
								<div id="sfprevbtn" title="Prev" class="fbutton" style="float: left; width: 45%;">
									<span class="fprev"></span>
								</div>
								<div class="btnseparator"></div>
								<div id="sfnextbtn" title="Next" class="fbutton" style="float: right; width: 47%;">
									<span class="fnext"></span>
								</div>
								<div>&nbsp;</div>
								<div id="faddbtn" class="fbutton">
									<div>
										<span title='Click to Create New Event' class="addcal"> New Event </span>
									</div>
								</div>
								<div id="showtodaybtn" class="fbutton">
									<div>
										<span title='Click to back to today ' class="showtoday"> Today</span>
									</div>
								</div>

								<div id="showdaybtn" class="fbutton">
									<div>
										<span title='Day' class="showdayview">Day</span>
									</div>
								</div>
								<div id="showweekbtn" class="fbutton fcurrent">
									<div>
										<span title='Week' class="showweekview">Week</span>
									</div>
								</div>
								<div id="showmonthbtn" class="fbutton">
									<div>
										<span title='Month' class="showmonthview">Month</span>
									</div>

								</div>
								<div id="showreflashbtn" class="fbutton">
									<div>
										<span title='Refresh view' class="showdayflash">Refresh</span>
									</div>
								</div>

								<div class="fshowdatep fbutton">
									<div>
										<input type="hidden" name="txtshow" id="hdtxtshow" /> <span id="txtdatetimeshow">Loading</span>

									</div>
								</div>

								<div class="clear"></div>
							</div>
						</div>
						<div><img src="/images/calendar/calendar/calendarLeftBg.png" style="width:100%; padding-top:90px; background-color:#FFFFFF;"></div>
					</td>
					<td>
						<div style="padding: 1px;">

							<div class="t1 chromeColor">&nbsp;</div>
							<div class="t2 chromeColor">&nbsp;</div>
							<div id="dvCalMain" class="calmain printborder">
								<div id="gridcontainer" style="overflow-y: visible;"></div>
							</div>
							<div class="t2 chromeColor">&nbsp;</div>
							<div class="t1 chromeColor">&nbsp;</div>
						</div>
					</td>
				</tr>
			</table>
		</div>
	</wicket:panel>
</body>
</html>